// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const server = require('express')()
// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer({
  template: require('fs').readFileSync('./index.html', 'utf-8')
})

// const app = new Vue({
//   template: `<div>Hello Vue SSR</div>`
// })
// renderer.renderToString(app, (html, err) => {
//   if (err) throw err
//   console.log(html)
// })
server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url,
      msg: 'Hello SSR'
    },
    template: `<div>您访问的url是：{{url}} {{msg}}</div>
    `
  })
  const content = {
    title: '666'
  }
  renderer.renderToString(app, content).then(html => {
    res.end(html)
  }).catch(err => {
    res.end(err)
  })
  // renderer.renderToString(app).then(html => {
  //   res.end(`
  //     <!DOCTYPE html>
  //     <html lang="en">
  //       <head>
  //       <meta charset="UTF-8">
  //       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  //       <meta http-equiv="X-UA-Compatible" content="ie=edge">
  //       <title>Hello</title>
  //       </head>
  //       <body>${html}</body>
  //     </html>
  //   `)
  // }).catch(err => {
  //   res.status(500).end('Internal Server Error' + err)
  // })
})
server.listen(8888, () => {
  console.log('listen 8888 ....')
})
// 第 3 步：将 Vue 实例渲染为 HTML
// renderer.renderToString(app, (err, html) => {
//   if (err) throw err
//   console.log(html)
// })
// renderer.renderToString(app).then(html => {
//   console.log(html)
// }).catch(err => {
//   console.error(err)
// })
